<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <!-- <el-form-item label="所属门店" prop="deptId">
        <el-select v-model="queryParams.deptId" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="日期" prop="deptId">
        <el-date-picker
          v-model="dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="会员号" prop="deptId">
        <el-input></el-input>
      </el-form-item> -->
      <el-form-item label="金额范围" prop="deptId">
        <el-input
          style="width: 100px"
          v-model="queryParams.minMoney"
        ></el-input>
        ~
        <el-input
          style="width: 100px"
          v-model="queryParams.maxMoney"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="orderList" style="width: 100%" v-loading="loading">
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column prop="settleTime" label="时间" width="180">
        <template slot-scope="scope">
          {{ parseTime(scope.row.settleTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="订单耗时">
        <template slot-scope="scope">
         {{ {{
            calculateMinutesDiff(scope.row.orderCallTime, scope.row.bsKcLastTime)
          }}}}分钟
        </template>
      </el-table-column>
      <el-table-column prop="pointName" label="桌号"> </el-table-column>
      <el-table-column prop="itemLastMoney" label="消费情况">
        <template slot-scope="scope">
          ￥{{ scope.row.itemLastMoney }}
          <span v-if="scope.row.bsKcCount">          /￥{{
            (scope.row.itemLastMoney / scope.row.bsKcCount).toFixed(2)
          }}</span>

        </template>
      </el-table-column>
      <el-table-column prop="bsKcCount" label="菜品数量">
        
        <template slot-scope="scope">
          <span v-if="scope.row.atchTypeMaps['A']"> 高({{ scope.row.atchTypeMaps['A'] }})</span>
         <span v-if="scope.row.atchTypeMaps['B']"> 中({{ scope.row.atchTypeMaps['B'] }})</span>
         <span v-if="scope.row.atchTypeMaps['C']"> 低({{ scope.row.atchTypeMaps['C'] }})</span>
        </template>
      </el-table-column>
      <el-table-column prop="bsKcTime" label="开始时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.bsKcTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="bsKcLastTime" label="结束时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.bsKcLastTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="queryOrder(scope.row)"
            >详情</el-button
          >
          <!-- <el-button size="mini" type="text" @click="queryDishes(scope.row)"
            >菜品</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
    <el-dialog title="订单详情" :visible.sync="orderDialog" width="800px">
      <el-descriptions class="margin-top" :column="3" size="mini" border>
        <el-descriptions-item label="单号"
          >{{orderDetais.code}}</el-descriptions-item
        >
        <el-descriptions-item label="桌号">{{orderDetais.pointName}}</el-descriptions-item>
        
        <el-descriptions-item label="应收金额">{{orderDetais.itemOrigMoney}}</el-descriptions-item>
        <el-descriptions-item label="赠送金额">{{orderDetais.itemDiscMoney}}</el-descriptions-item>
        
        <el-descriptions-item label="收款金额">{{orderDetais.itemLastMoney}}</el-descriptions-item>
        <el-descriptions-item label="赠送原因">{{orderDetais.discInfo}}</el-descriptions-item>
        
        <el-descriptions-item label="开台时间">
         {{parseTime(orderDetais.openTime)}}
        </el-descriptions-item>
        <el-descriptions-item label="结算时间"
          >{{parseTime(orderDetais.settleTime)}}</el-descriptions-item
        >
        <el-descriptions-item label="用餐时长"
          >{{orderDetais.dinnerTime}}</el-descriptions-item
        >
        <el-descriptions-item label="第一个菜品上菜时间">{{parseTime(orderDetais.bsKcTime)}}</el-descriptions-item>
        <el-descriptions-item label="最后一个菜品上菜时间">{{parseTime(orderDetais.bsKcLastTime)}}</el-descriptions-item>
        <el-descriptions-item label="菜品数量">{{orderDetais.bsKcCount}}</el-descriptions-item>
        <el-descriptions-item label="订单耗时"> {{calculateMinutesDiff(orderDetais.bsKcTime, orderDetais.bsKcLastTime)}}分钟</el-descriptions-item>
      </el-descriptions>
      <el-table :data="disherList" style="margin-top: 10px;" border>
        <el-table-column property="itemName" label="菜品名称"></el-table-column>
        <el-table-column property="serveFinishTime" label="配菜时间"></el-table-column>
        <el-table-column property="cookFinishTime" label="上菜时间"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="菜品详情" :visible.sync="dishesDialog" width="800px">
      <el-table :data="disherList">
        <el-table-column property="itemName" label="菜品名称"></el-table-column>
        <el-table-column property="serveFinishTime" label="配菜时间"></el-table-column>
        <el-table-column property="cookFinishTime" label="上菜时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderList } from "@/api/liangshi/order";
import { getKscListByBsId } from "@/api/liangshi/kcKcs";
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 岗位表格数据
      orderList: [],
      treeData: [],
      options: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dateRange: [],
      dishesDialog: false,
      orderDialog: false,
      disherList: [],
      orderDetais:{}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    queryDishes(row) {
      console.log(row)
      this.dishesDialog = true;
      getKscListByBsId({bsId:row.id}).then(res=>{
        this.disherList=res.rows;
      })
    },
    queryOrder(row) {
      this.orderDialog = true;
      this.orderDetais=row;
      getKscListByBsId({bsId:row.id}).then(res=>{
        this.disherList=res.rows;
      })
    },
    getList() {
      this.loading = true;
      getOrderList(
        this.addDateRange(this.queryParams, this.dateRange, true)
      ).then((res) => {
        this.loading = false;
        this.orderList = res.rows;
        this.total = res.total;
      });
    },
  },
};
</script>

<style></style>